<template>
    <div class="platform-page page">
        <div class="content">
            <PlatformCrumb back="权限账号">
                <el-button type="primary" @click="adduser" size="mini" slot="right">新增账户</el-button>
            </PlatformCrumb>
            <div class="table">
                <el-table
                        :header-cell-style="{background:'#F7F7F7',color:'#333333'}"
                        ref="multipleTable"
                        :data="list"
                        stripe
                        tooltip-effect="dark"
                        style="width: 100%"
                >
                    <el-table-column align="center" type="index" label="序号" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="account" label="账号" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="nikename" label="姓名" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="position" label="职位" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="phone" label="手机号" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="department" label="部门" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="jurisdiction" label="权限" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span style="margin-right: 5px"
                                  v-for="(item,index) in scope.row.menuList">{{item.menuName}} </span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="status" label="状态" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span>{{scope.row.status|filtersstatus}} </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="opera" label="操作" show-overflow-tooltip>
                        <!-- <template slot-scope="scope">
                          <el-button @click="handleClick(scope.row)" type="text" size="small">审核通过</el-button>
                        </template> -->
                        <template slot-scope="scope">
                            <el-button @click="showEdit(scope.row)" type="text" size="small">编辑</el-button>
                            <el-button v-if="scope.row.status==0" @click="dongjie(scope.row.id,1)" class="del-btn"
                                       type="text" size="small">冻结
                            </el-button>
                            <el-button v-else @click="dongjie(scope.row.id,0)" type="text" size="small"
                                       class="del-btnn">
                                解除冻结
                            </el-button>
                        </template>
                    </el-table-column>
                    <!--                    <el-table-column prop="opera" label="" show-overflow-tooltip>-->
                    <!--                        <template slot-scope="scope">-->
                    <!--                            <el-button @click="handleClick(scope.row)" type="text" size="small" class="del-btnn">解除冻结-->
                    <!--                            </el-button>-->
                    <!--                        </template>-->
                    <!--                    </el-table-column>-->
                </el-table>
                <div class="pagination">
                    <el-pagination background :page-size="pageSize" layout="total, prev, pager, next"
                                   :total="total"></el-pagination>
                </div>
            </div>
        </div>
        <div v-show="isdelete" @click="delete_fun" class="mask"></div>
        <div v-show="isdelete" class="delete_sai delete_flex_start">
            <div class="delete_sai_body">
                <div class="delete_sai_body2 delete_jiaoan w730">
                    <div class="delete_sai_body2_head w100">
                        <span>新增/编辑账户</span>
                    </div>
                    <div class="edituser w90 maauto mt40">
                        <el-form ref="form" :model="form" label-width="120px">
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="账号">
                                        <el-input v-model="data.account" @change="changeaccount"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="姓名">
                                        <el-input v-model="data.nikename" @change="changenikename"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="职位">
                                        <el-input v-model="data.position" @change="changeposition"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="手机号">
                                        <el-input oninput="if(value.length>11)value=value.slice(0,11)" type="number" v-model="data.phone" @change="changephone"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="部门">
                                        <el-input v-model="data.department" @change="changedepartment"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12" v-if="iscreate">
                                    <el-form-item label="密码">
                                        <el-input v-model="data.password"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="权限">
                                        <el-checkbox-group v-model="listqx" @change="change">
                                            <el-checkbox v-for="(item,index) in MenuList" :label="item.menuId"
                                                         name="type">
                                                {{item.menuName}}
                                            </el-checkbox>
                                        </el-checkbox-group>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <div class="adduserGL">
                                <div v-if="iscreate" @click="saveuser" class="adduserGL1 cur">
                                    创建
                                </div>
                                <div v-else class="adduserGL1 cur" @click="saveuser">
                                    保存
                                </div>
                                <div class="adduserGL2 cur" @click="delete_fun">
                                    取消
                                </div>
                            </div>
                        </el-form>
                    </div>
                </div>

            </div>
            <i class="el-icon-circle-close cur" @click="delete_fun"></i>
        </div>
    </div>
</template>
<style>
    .edituser .el-form-item__label {
        text-align: center;
    }

    .edituser .el-input .el-input__inner {
        height: 32px;
    }

</style>
<script>
    import PlatformCrumb from "@/components/PlatformCrumb.vue";
    import {getAdminList, editGL, addGL, sysMenugetList} from '../../api/api/platform.js';
    import {baseImgPath, basefile} from '@/config/env.js';

    export default {
        components: {
            PlatformCrumb,
        },
        data() {
            return {
                list: '',
                pageSize: 10,
                pageNum: 1,
                total: 0,
                data: {
                    account: "",
                    department: "",
                    list: [],
                    nikename: "",
                    phone: "",
                    position: "",
                    password: '',
                    status: 0,
                },
                data2: {},
                listqx: [],
                iscreate: false,
                isdelete: false,
                MenuList: [],
            };
        },
        created() {
            this.getList()
            this.sysMenugetList()
        },
        methods: {
            // 切换
            change(e) {
                console.log(e);
                this.data2.list = e
                this.data.list = e
                console.log(this.data.list);
                console.log(this.data2.list);
            },

            handleClick(row) {
                console.log(row);
            },
            changedepartment(e) {
                this.data2.department = e
            },
            changeaccount(e) {
                this.data2.account = e
            },
            changephone(e) {
                this.data2.phone = e
            },
            changenikename(e) {
                this.data2.nikename = e
            },
            changeposition(e) {
                this.data2.position = e
            },
            handleSizeChange(val) {
                this.pageSize = val
                this.getList()
            },
            handleCurrentChange(val) {
                this.pageNum = val
                this.getList()
            },
            // 获取列表
            getList() {
                var that = this;
                getAdminList({
                    "pageNum": that.pageNum,
                    "pageSize": that.pageSize,
                }).then(res => {
                    if (res.code == 200) {
                        that.list = res.data.list
                        that.total = res.data.total
                    }
                });
            },
            // 冻结
            dongjie(e, status) {
                var that = this;
                editGL({
                    'id': e,
                    'status': status
                }).then(res => {
                    if (res.code == 200) {
                        that.getList()
                        this.$message({
                            message: '状态变更成功',
                            type: 'success'
                        });
                    }
                });

            },
            // 编辑
            editGl() {
                var that = this;
                that.data2.id = that.data.id
                editGL(this.data2).then(res => {
                    if (res.code == 200) {
                        that.getList()
                        that.$message({
                            message: '更新成功',
                            type: 'success'
                        });
                        that.isdelete = false
                    }
                });

            },
            // 获取权限类型
            sysMenugetList() {
                var that = this;
                sysMenugetList().then(res => {
                    if (res.code == 200) {
                        that.MenuList = res.data
                    }
                });

            },
            // 编辑
            showEdit(e) {
                this.isdelete = true
                this.data = e
                console.log(e);
                this.listqx=[]
                console.log(e.menuList);
                if (e.menuList) {
                    for (var i = 0; i < e.menuList.length; i++) {
                        this.listqx.push(e.menuList[i].menuId)
                        console.log(this.listqx)
                    }
                }
                console.log(this.data);
                this.iscreate = false
                console.log(this.data);
            },
            delete_fun() {
                this.isdelete = !this.isdelete
            },
            // 增加账户
            addGl() {
                var that = this;
                console.log(that.data);
                addGL(that.data).then(res => {
                    if (res.code == 200) {
                        that.getList()
                        that.$message({
                            message: '新增成功',
                            type: 'success'
                        });
                        that.data2 = {}
                        that.isdelete = false
                    }
                });
            },
            saveuser() {
                if (this.iscreate) {
                    this.addGl()
                } else {
                    this.editGl()
                }
            },
            adduser() {
                this.data = {
                    account: "",
                    department: "",
                    list: [],
                    nikename: "",
                    phone: "",
                    position: "",
                    password: '',
                    status: 0,
                }
                this.listqx=[]
                this.iscreate = true
                this.delete_fun()
            },
        },
        filters: {
            filtersstatus: function (e) {
                if (e) {
                    return '冻结'
                } else {
                    return '正常'
                }
            },
            filterqx: function (e, data) {
                for (var i = 0; i < data.length; i++) {
                    if (e == data.menuId) {
                        return data[i].menuName
                    }
                }
            },
        }
    };
</script>

<style lang="less" scoped>
    @import url("platform.less");

    .operation {
        margin-right: 25px;
    }

    .pass-btn {
        background-color: #2d64b3;
        border-color: #2d64b3;

        &:hover {
            background-color: #2d64b3;
            border-color: #2d64b3;
        }
    }

    .table {
        .del-btn {
            color: #c60818;
        }

    }

    .del-btnn {
        color: #999999;
    }

</style>
